<template>
	<view>
		<tui-skeleton v-if="skeletonShow" backgroundColor="#fafafa" borderRadius="10rpx"></tui-skeleton>
		<!-- 单行显示 -->
		
		<view class="tui-product-container tui-skeleton-rect margin-top-xs" v-if="tyleNum==1">
				<!--商品列表-->
				<!--list-->
				<view class="tui-product-list bg-white">
					<view class="tui-product-container tui-skeleton-rect">
						
					<view class="tui-flex-box solids-bottom"
							  v-for="(item, index) in list" :key="index"
							  :data-goods_id="item.goods_id"
							  :data-goods_type="item.goods_type"
							   @tap="detail($event)">
						<view class="tui-flex">
								<view class="tui-center  tui-col-4">
									<view class="tui-proimg-list">
										<!-- <image :src="item.goods.label_img" class="tui-new-label goods-img" v-if="item.goods.label !=''"></image> -->
										<image :src="item.goods.thumb" class="tui-pro-img  tui-skeleton-rect"  mode="widthFix" />
									</view>
								</view>
								<view class="tui-col-8">
									<view class="tui-pro-content tui-skeleton-rect">
										<view class="tui-pro-tit tui-skeleton-rect">{{ item.goods.goods_name }}</view>
										<view>
											<view class="tui-pro-price tui-skeleton-rect">
												<text class="tui-factory-price tui-skeleton-rect">￥{{ item.goods.line_price }}</text>
												<text class="tui-sale-price tui-skeleton-rect">￥{{ item.goods.goods_price }}</text>
											</view>
											<view class="tui-pro-pay tui-skeleton-rect">{{ item.goods.sales_initial }}人付款</view>
										</view>
									</view>
								</view>
										
						</view>
					</view>
				</view>
				</view>
		</view>
		
		
		<!-- 一行两个 -->
		<view class="tui-product-list tui-skeleton-rec" v-if="tyleNum==2">
			<view class="tui-product-container tui-skeleton-rec"  >
				<tui-grid  v-for="(items,index) in list" :key="index">
					<block v-for="(item,key) in items" :key="key">
						<tui-grid-item :cell="2" :data-goods_id="item.goods_id" @tap="detail($event)">
							<view class="tui-pro-item tui-skeleton-rec"
								hover-class="hover"
								:hover-start-time="150" :data-goods_id="item.goods_id" @tap="detail($event)"
							>
								<!-- <image :src="item.goods.label_img" class="tui-new-label goods-img" v-if="item.goods.label !=''"></image> -->
								<image :src="item.goods.thumb" class="tui-pro-img tui-skeleton-rect goods-img tui-skeleton-rec" mode="widthFix" />
								<view class="tui-pro-content">
									<view class="tui-pro-tit tui-skeleton-rect">{{ item.goods.goods_name }}</view>
									<view>
										<view class="tui-pro-price tui-skeleton-rec">
											<text class="tui-factory-price tui-skeleton-rect">￥{{ item.goods.line_price }}</text>
											<text class="tui-sale-price tui-skeleton-rect ">￥{{ item.goods.goods_price }}</text>
										</view>
										<view class="tui-pro-pay tui-skeleton-rect">{{ item.goods.sales_initial}}人付款</view>
									</view>
								</view>
							</view>
						</tui-grid-item>
					</block>
				</tui-grid>
			</view>
		</view>
		
		<!-- 一行显示两个迷你模式 -->
		<view class="tui-new-box tui-skeleton-rec" v-if="tyleNum==3">
			<block v-for="(items, index) in list" :key="index" >
						
				<view class="tui-new-item margin-bottom-xs tui-skeleton-rec" :class="[index != 0 && index != 1 ? 'tui-new-mtop' : '']" 
				:data-goods_id="item.goods_id" @tap="detail($event)" v-for="(item, key) in items">
					
					<!-- <image :src="item.goods.label_img" class="tui-new-label goods-img" v-if="item.goods.label !=''"></image> -->
					<image :src="item.goods.thumb" class="tui-new-img tui-skeleton-rec padding-right-sm" mode="aspectFill"></image>
					<view class="tui-title-box tui-col-7">
						<view class="tui-new-title tui-skeleton-rect">{{ item.goods.goods_name }}</view>
						<view class="tui-new-price tui-skeleton-rect">
							<text class="tui-new-original ">￥{{ item.goods.line_price}}</text>
						</view>
						<view class="tui-new-price tui-skeleton-rect">
							<text class="tui-new-present">￥{{item.goods.goods_price  }}</text>
						</view>
					</view>
					
				</view>
			</block>	
					
		</view>
		
		<!-- 单图片模式 -->
		<view class="tui-activity-box tui-skeleton-rect bg-white"  v-if="tyleNum==4">
			<view class="one-img-box solid-bottom"  v-for="(item, index) in list" :key="index" :data-goods_id="item.goods_id" @tap="detail($event)">
				<view class="tui-center  margin-bottom-xs">
					<image :src="item.goods.thumb" mode="heightFix" class="one-img tui-skeleton-rec"></image>
				</view>
			</view>
		</view>
		
		<!-- 一行显示两图模式 -->
		<view class="tui-activity-box tui-skeleton-rec" v-if="tyleNum==5">
			<tui-grid v-for="(items,index) in list"  :key="index">
				<block v-for="(item,key) in items" :key="key">
					<tui-grid-item :cell="2">
						<view class="tui-grid-icon tui-skeleton-rec">
							<!-- <image :src="item.goods.label_img" class="tui-new-label goods-img" v-if="item.goods.label !=''"></image> -->
							<image :src="item.goods.thumb" class="tui-pro-img tui-skeleton-rect goods-img" mode="widthFix"   :data-goods_id="item.goods.goods_id" @tap="detail($event)"/>
						</view>
						<!-- <text class="tui-grid-label">{{item.name}}</text> -->
					</tui-grid-item>
				</block>
			</tui-grid>
		</view>
		
		<!-- 一行三个 -->
		<view class="tui-product-list tui-skeleton-rec" v-if="tyleNum==6">
			<view class="tui-product-container tui-skeleton-rec"  >
				<tui-grid  v-for="(items,index) in list" :key="index">
					<block v-for="(item,key) in items" :key="key">
						<tui-grid-item :cell="3" :data-goods_id="item.goods_id" @tap="detail($event)">
							<view class="tui-pro-item tui-skeleton-rec"
								hover-class="hover"
								v-for="(item,key) in items"
								:hover-start-time="150" :data-goods_id="item.goods_id" @tap="detail($event)"
							>
								<!-- <image :src="item.goods.label_img" class="tui-new-label goods-img" v-if="item.goods.label !=''"></image> -->
								<image :src="item.goods.thumb" class="tui-pro-img tui-skeleton-rect goods-img tui-skeleton-rec" mode="widthFix" />
								<view class="tui-pro-content">
									<view class="tui-pro-tit tui-skeleton-rect">{{ item.goods.goods_name }}</view>
									<view>
										<view class="tui-pro-price tui-skeleton-rec">
											<text class="tui-sale-price tui-skeleton-rect ">￥{{ item.goods.goods_price }}</text>
										</view>
										<view class="tui-pro-pay tui-skeleton-rect">
											<text class="tui-factory-price-cell tui-skeleton-rect">￥{{ item.goods.line_price }}</text>
										</view>
									</view>
								</view>
							</view>
						</tui-grid-item>
					</block>
				</tui-grid>
			</view>
		</view>
		
	
	</view>
</template>

<script>
	export default {
		name: 'goods-list',
		data() {
			return {
				skeletonShow:true
			};
		},
		props: {
			list:{
				type: Array,
				default: function(){
					return [];
				}
			},
			tyleNum:{
				type:Number,
				default:function(){
					return 1;
				}
			}
		},
		created() {
			let that = this;
			setTimeout(() => {
				that.skeletonShow = false
			}, 1800);
			console.log('组件数据',that.list,that.tyleNum)
		},
		methods: {
			detail:function(e){
				let that = this
				console.log(e)
				let goods_id = e.currentTarget.dataset.goods_id
				that.$Router.push({ name: 'productDetail', params: { goods_id:goods_id }})
			}
		}
	}
</script>

<style>
.tui-flex-list {
	display: flex;
}
.tui-product-list {
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	flex-wrap: wrap;
	box-sizing: border-box;
	/* padding-top: 20rpx; */
}
.tui-proimg-list {
	width: 100%;
	    padding: 10px;
}
.tui-pro-tit {
	color: #2e2e2e;
	font-size: 26rpx;
	word-break: break-all;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}
.tui-product-container {
	flex: 1;
}
.solid-bottom::after {
	border-bottom: 1upx solid rgba(0,0,0,.1)
}
.tui-factory-price-cell{
	    font-size: 11px;
	    color: #a0a0a0;
	    text-decoration: line-through;
}

.tui-product-container:last-child {
	margin-right: 0;
}
.one-img-box {
    width: 100%;
    display: block;
}
.one-img{
	border-radius: 5rpx;
}
.tui-pro-item {
	box-sizing: border-box;
	position: relative;
}

.tui-pro-img {
	width: 100%;
	display: block;
}

.tui-pro-content {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	box-sizing: border-box;
	padding: 20rpx;
}
.tui-new-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}

.tui-new-item {
	width: 49%;
	height: 200rpx;
	padding: 0 20rpx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	background: #f5f2f9;
	position: relative;
	border-radius: 12rpx;
}

.tui-new-mtop {
	margin-top: 2%;
}

.tui-title-box {
	font-size: 24rpx;
}

.tui-new-title {
	line-height: 32rpx;
	word-break: break-all;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.tui-new-price {
	padding-top: 18rpx;
}

.tui-new-present {
	color: #ff201f;
	font-weight: bold;
}

.tui-new-original {
	display: inline-block;
	color: #a0a0a0;
	text-decoration: line-through;
	padding-left: 12rpx;
	transform: scale(0.8);
	transform-origin: center center;
}

.tui-new-img {
	width: 160rpx;
	height: 160rpx;
	display: block;
	flex-shrink: 0;
}

.tui-new-label {
	width: 56rpx;
	height: 56rpx;
	border-top-left-radius: 12rpx;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
}

.tui-pro-tit {
	color: #2e2e2e;
	font-size: 26rpx;
	word-break: break-all;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.tui-pro-price {
	padding-top: 18rpx;
}

.tui-sale-price {
	font-size: 34rpx;
	font-weight: 500;
	color: #e41f19;
}

.tui-factory-price {
	font-size: 24rpx;
	color: #a0a0a0;
	text-decoration: line-through;
	padding-left: 12rpx;
}

.tui-pro-pay {
	padding-top: 10rpx;
	font-size: 24rpx;
	color: #656565;
}
.goods-img{
	border-radius: 5rpx;
}
</style>
